Cierre al curso

IIC2026 2020-2

Panorámica del curso

Cierre al curso

IIC2026 2020-2

¿Cómo es trabajar en Visualización de Información?

¿Por dónde parto?

¿Hacia dónde voy?

¿Hay mejores opciones que otras?

¿Me debería enfocar en efectividad?

¿Cómo me aseguro tomé buenas decisiones?

¿En qué me enfoco al validar una visualización?

Modelo anidado de trabajo en cuatro niveles

Caracterización de dominio

• Entender el campo de conocimiento y contexto de aplicación
• Entender datos, usuarios y tareas.
• Entrevistas, observaciones o investigación mediante literatura.

Abstracción de datos y tareas

• Traer las particularidades del contexto al mismo lenguaje.
• Definir el qué y por qué de la herramienta.
• Seleccionar los aspectos a consideración.

Abstracción de datos y tareas

• Traer las particularidades del contexto al mismo lenguaje.
• Definir el qué y por qué de la herramienta.
• Seleccionar los aspectos a consideración.

Entrega 1 e Hito 1

Codificación visual y de interacción
Implementación algorítmica

• Definir el cómo.
• Idiom: enfoque distintivo de codificar información o manipularla.
• Hay decisiones visuales y decisiones de interacción.
• Código.
• Se revisa eficiencia, escalabilidad y dificultad.

Codificación visual y de interacción

• Marcas y canales.

Codificación visual y de interacción

• Marcas y canales.
• Principios de efectividad y expresividad.

Codificación visual y de interacción

• Marcas y canales.
• Principios de efectividad y expresividad.
• Percepción.

Codificación visual y de interacción

• Marcas y canales.
• Principios de efectividad y expresividad.
• Percepción.
• Color.

Codificación visual y de interacción

• Marcas y canales.
• Principios de efectividad y expresividad.
• Percepción.
• Principios de diseño.

Codificación visual y de interacción

• Marcas y canales.
• Principios de efectividad y expresividad.
• Percepción.
• Principios de diseño.
• Codificaciones para datos tabulares.

Codificación visual y de interacción

• Marcas y canales.
• Principios de efectividad y expresividad.
• Percepción.
• Principios de diseño.
• Codificaciones para datos tabulares.
• Codificaciones para datos geométricos.

Codificación visual y de interacción

• Marcas y canales.
• Principios de efectividad y expresividad.
• Percepción.
• Principios de diseño.
• Codificaciones para datos tabulares.
• Codificaciones para datos geométricos.
• Codificaciones para datos redes.

Codificación visual y de interacción

• Marcas y canales.
• Principios de efectividad y expresividad.
• Percepción.
• Principios de diseño.
• Codificaciones para datos tabulares.
• Codificaciones para datos geométricos.
• Codificaciones para datos redes.
• Manipulación de vista.

Codificación visual y de interacción

• Marcas y canales.
• Principios de efectividad y expresividad.
• Percepción.
• Principios de diseño.
• Codificaciones para datos tabulares.
• Codificaciones para datos geométricos.
• Codificaciones para datos redes.
• Manipulación de vista.
• Facet.

Codificación visual y de interacción

• Marcas y canales.
• Principios de efectividad y expresividad.
• Percepción.
• Principios de diseño.
• Codificaciones para datos tabulares.
• Codificaciones para datos geométricos.
• Codificaciones para datos redes.
• Manipulación de vista.
• Facet.
• Reducción de datos.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.
• Join de datos.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.
• Join de datos.
• Cargado de datos.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.
• Join de datos.
• Cargado de datos.
• Escalas.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.
• Join de datos.
• Cargado de datos.
• Escalas.
• Ejes.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.
• Join de datos.
• Cargado de datos.
• Escalas.
• Ejes.
• Eventos.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.
• Join de datos.
• Cargado de datos.
• Escalas.
• Ejes.
• Eventos.
• Transiciones.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.
• Join de datos.
• Cargado de datos.
• Escalas.
• Ejes.
• Eventos.
• Transiciones.
• Escalas para organización espacial.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.
• Join de datos.
• Cargado de datos.
• Escalas.
• Ejes.
• Eventos.
• Transiciones.
• Escalas para organización espacial.
• Marcas de muchos tipos.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.
• Join de datos.
• Cargado de datos.
• Escalas.
• Ejes.
• Eventos.
• Transiciones.
• Escalas para organización espacial.
• Marcas de muchos tipos.
• Zoom.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.
• Join de datos.
• Cargado de datos.
• Escalas.
• Ejes.
• Eventos.
• Transiciones.
• Escalas para organización espacial.
• Marcas de muchos tipos.
• Zoom.
• Proyecciones geográficas.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.
• Join de datos.
• Cargado de datos.
• Escalas.
• Ejes.
• Eventos.
• Transiciones.
• Escalas para organización espacial.
• Marcas de muchos tipos.
• Zoom.
• Proyecciones geográficas.
• Brushing.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.
• Join de datos.
• Cargado de datos.
• Escalas.
• Ejes.
• Eventos.
• Transiciones.
• Escalas para organización espacial.
• Marcas de muchos tipos.
• Zoom.
• Proyecciones geográficas.
• Brushing.
• Agregación.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.
• Join de datos.
• Cargado de datos.
• Escalas.
• Ejes.
• Eventos.
• Transiciones.
• Escalas para organización espacial.
• Marcas de muchos tipos.
• Zoom.
• Proyecciones geográficas.
• Brushing.
• Agregación.
• Vista.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.
• Join de datos.
• Cargado de datos.
• Escalas.
• Ejes.
• Eventos.
• Transiciones.
• Escalas para organización espacial.
• Marcas de muchos tipos.
• Zoom.
• Proyecciones geográficas.
• Brushing.
• Agregación.
• Vista.
• Posicionamiento dirigido por fuerzas.

Implementación algorítmica

• HTML, CSS, SVG, JavaScript.
• D3.js.
• Selecciones.
• Join de datos.
• Cargado de datos.
• Escalas.
• Ejes.
• Eventos.
• Transiciones.
• Escalas para organización espacial.
• Marcas de muchos tipos.
• Zoom.
• Proyecciones geográficas.
• Brushing.
• Agregación.
• Vista.
• Posicionamiento dirigido por fuerzas.
• Jerarquías.

Codificación visual y de interacción
Implementación algorítmica

• Definir el cómo.
• Idiom: enfoque distintivo de codificar información o manipularla.
• Hay decisiones visuales y decisiones de interacción.
• Código.
• Se revisa eficiencia, escalabilidad y dificultad.

Entrega 2, Hito 2, Entrega 3 e Hito 3.

Examen

Panorámica del curso

Cierre al curso

IIC2026 2020-2

¡Deja tus preguntas en los comentarios!